<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDict } from '@/hooks/useDict'
import { useTableList } from '@/hooks/useTableList'
import {
  getSpecialList,
  deleteSpecial,
  updateSpecial,
} from '@/api/manager/inspectionManage/specialManage.js'

const searchParams = ref({})

const {
  Search,
  toggleSearchStatus,
  showToggle,
  handleToggleSearch,
  tableData,
  paginationParams,
  total,
  initTableList,
  handleSizeChange,
  handleReset,
  handleDelete,
  addRef,
  detailRef,
  currentDetail,
  handleAdd,
  handleEdit,
  handleDetail,
  handleClose,
  searchFromRef,
} = useTableList(searchParams, getSpecialList, deleteSpecial)

const { dict, getDictStyle, getDictValue } = useDict([
  'special_task_type',
  'special_task_publish_scope',
  'inspection_status',
])

const handleEnd = (row) => {
  ElMessageBox.confirm('是否确定终止该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const params = { ...row, taskStatus: '-2' }
      const res = await updateSpecial(params)
      if (res.success) {
        ElMessage({
          type: 'success',
          message: '终止成功',
        })
        initTableList(1)
      } else {
        ElMessage.error(res.message)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

onMounted(() => {
  initTableList(1)
})
</script>

<template>
  <div class="custom-table-list-wrapper">
    <div class="search" :class="{ active: toggleSearchStatus }">
      <div class="search-left" ref="searchFromRef">
        <el-form class="search-form" inline>
          <el-form-item label="任务类型">
            <el-select
              class="search-select"
              v-model="searchParams.taskType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="option of dict['special_task_type']"
                :key="option.value"
                :label="option.name"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布范围">
            <el-select
              class="search-select"
              v-model="searchParams.publishScope"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="option of dict['special_task_publish_scope']"
                :key="option.value"
                :label="option.name"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select
              class="search-select"
              v-model="searchParams.taskStatus"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="option of dict['inspection_status']"
                :key="option.value"
                :label="option.name"
                :value="option.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="生效日期">
            <el-date-picker
              v-model="searchParams.effectiveDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              class="search-input"
              v-model="searchParams.keyword"
              placeholder="请输入任务编号或名称"
              :suffix-icon="Search"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <a
          class="search-left-toggle"
          v-if="showToggle"
          @click="handleToggleSearch"
        >
          <svg-icon :name="toggleSearchStatus ? 'up' : 'down'" />
          {{ toggleSearchStatus ? '收起' : '展开' }}
        </a>
      </div>
      <div class="search-right">
        <el-button type="primary" @click="initTableList(1)">
          <svg-icon name="search" size="14px" />
          搜索
        </el-button>
        <el-button @click="handleReset()">
          <svg-icon name="reset" size="17px" />
          重置
        </el-button>
      </div>
    </div>
    <div class="content">
      <div class="content-operate">
        <el-button
          type="primary"
          @click="handleAdd('specialManageAdd', {}, true)"
        >
          <svg-icon name="add" size="15px" />
          新增
        </el-button>
      </div>
      <div class="content-table">
        <el-table class="custom-table" :data="tableData">
          <el-table-column type="index" label="序号" width="60px" />
          <el-table-column prop="code" label="任务编号" />
          <el-table-column prop="name" label="任务名称" />
          <el-table-column label="任务类型">
            <template #default="scope">
              <span>{{
                getDictValue('special_task_type', scope.row.taskType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="publishUserName" label="发布人" />
          <el-table-column label="发布范围">
            <template #default="scope">
              <span>{{
                getDictValue(
                  'special_task_publish_scope',
                  scope.row.publishScope,
                )
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" />
          <el-table-column prop="startDate" label="生效日期" width="120" />
          <el-table-column prop="endDate" label="终止日期" width="120" />
          <el-table-column prop="status" label="任务状态" width="100">
            <template #default="scope">
              <el-tag
                :type="getDictStyle('inspection_status', scope.row.taskStatus)"
              >
                {{ getDictValue('inspection_status', scope.row.taskStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160px">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="
                  handleDetail(
                    { pkid: scope.row.pkid },
                    'specialManageDetail',
                    true,
                  )
                "
                >查看
              </el-button>
              <el-button
                v-if="['-1', '0'].includes(scope.row.taskStatus)"
                link
                type="primary"
                @click="
                  handleEdit({ pkid: scope.row.pkid }, 'specialManageAdd', true)
                "
                >编辑
              </el-button>
              <el-button
                v-if="['1'].includes(scope.row.taskStatus)"
                link
                type="danger"
                @click="handleEnd(scope.row)"
                >终止</el-button
              >
              <el-button
                v-if="['-1', '0'].includes(scope.row.taskStatus)"
                link
                type="danger"
                @click="handleDelete(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="content-page">
        <el-pagination
          class="custom-pagination"
          :current-page="paginationParams.pageIndex"
          :page-size="paginationParams.pageSize"
          background
          :page-sizes="[10, 20, 30, 50]"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="initTableList"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss" src="@/assets/styles/table.scss"></style>
